<template>
  <div>
    <div class="myTopicList">
      <el-table v-loading="false" :data="topicList" :show-overflow-tooltip="true">
        <el-table-column label="试题类型" align="center" prop="topicType" min-width="5%">
          <template slot-scope="scope">
            {{ returnTopicType(scope.row.topicType) }}
          </template>
        </el-table-column>
        <el-table-column label="知识点" align="center" prop="categoryName" min-width="7%"
                         :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="题干" align="center" prop="content" min-width="25%" :show-overflow-tooltip="true"/>
        <el-table-column label="答案" align="center" prop="answer" min-width="15%" :show-overflow-tooltip="true"/>
        <el-table-column label="难度" align="center" prop="difficulty" min-width="5%">
          <template slot-scope="scope">
            {{ returnDifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column label="分值" align="center" prop="score" min-width="5%"/>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList()"/>
    </div>
  </div>
</template>


<script>
import { getTacticsTopicList } from "@/api/exam/examPaperTopic";


export default ({
  name: "TopicList",
  dicts: ["topic_type", "topic_difficulty"],
  components: {

  },
  props:{

  },
  data() {
    return {
      tacticsId:null,
      // 遮罩层
      loading: true,
      // 试题表格数据
      topicList: [],
      // 列表总数
      total: 0,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  watch:{

  },
  created() {

  },
  methods: {
    /**返回试题类型 */
    returnTopicType(type) {
      return this.dict.type.topic_type.find((item) => item.value === type + "")
        .label;
    },
    /**返回难度 */
    returnDifficulty(difficulty) {
      return this.dict.type.topic_difficulty.find(
        (item) => item.value === difficulty + ""
      ).label;
    },
    /** 查询试题列表 */
    getList(id) {
      if (id){
        this.tacticsId=id
      }
      this.loading = true;
      getTacticsTopicList(this.tacticsId).then((response) => {
        this.topicList = response.rows;
        this.total = response.total?response.total:0;
        this.loading = false;
      });
    },
  },
})
</script>

<style scoped lang="scss">
::v-deep .el-tooltip__popper {
  font-size: 14px;
  max-width: 550px;
  overflow: hidden;
}

.myTopicList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.upload_total {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 680px;
  padding-bottom: 200px;
  box-sizing: border-box;
}

.link_txt {
  width: 110px;
  margin: 10px auto;
}
.checked_box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  &_left{
    width: 49%;
    background: white;
    .btns_operation{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .detection_connect{
      width: 100%;
      padding: 16px;
      height: 600px;
      overflow: auto;
      box-sizing: border-box;
      border: 1px solid #f3f3f3;
      .detection_item{
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
  &_right{
    width: 49%;
    background: white;
    .detection_connect{
      width: 100%;
      padding: 16px;
      height: 600px;
      overflow: auto;
      box-sizing: border-box;
      border: 1px solid #f3f3f3;
      .connect_info{
        font-size: 16px;
        font-weight: 500;
        span{
          font-weight: bold;
          font-size: 18px;
        }
      }
      .connect_txt{
        font-size: 14px;
        font-weight: 500;
        span{
          font-weight: bold;
          font-size: 16px;
        }
      }
      .detection_item{

      }
    }
  }
}
.topic_item{
  font-size: 14px;
  font-weight: 500;
  color: #676665;
}
.success_prompt{
  width: 100%;
  color: #1ab394;
  background: #f0f9eb;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 4px 0;
}
.warning_prompt{
  width: 100%;
  color: #f39f6c;
  background: #f9eadc;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 4px 0;
}
.error_prompt{
  width: 100%;
  color: #f56c6c;
  background: #fde6e6;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 4px 0;
}
.btns_bottom{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 0;
  box-sizing: border-box;
}
.up_excel_all{
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.up_excel{
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.color_red{
  color: #fb1b23;
}
.color_orange{
  color: #f18e3b;
}
.title{
  margin-top: 20px;
  span{
    font-weight: bold;
    margin: 0 4px;
    font-size: 16px;
  }
}
.w_100{
  width: 100% !important;
}

.topicForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.formFooter {
  box-sizing: inherit;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  height: 32px;
}

.show-hide:hover :nth-child(2) {
  display: inline-block !important;
}

::v-deep .el-input--mini .el-input__inner {
  height: 25px;
  text-align: center;
  line-height: 25px;
}
</style>
